<template>
    <div>

        <el-form :model="form" ref="form" label-width="150px">
            <div class="updateinfo">
                <div class="left">
                    <el-form-item label="头像" prop="avatar">
                        <el-image style="width: 200px; height: 200px" :src="avatar" :fit="fill" />
                    </el-form-item>
                    <el-form-item label="账号密码" prop="password">
                        <el-input v-model="form.password"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" prop="nickname">
                        <el-input v-model="form.nickname"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <el-switch v-model="sex" size="large" active-text="男" inactive-text="女" :active-value='0' :nactive-value='1' />
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.email"></el-input>
                    </el-form-item>

                </div>
                <div class="right">
                    <el-form-item label="用户编号" prop="id">
                        <el-input v-model="form.id" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="地区" prop="area">
                        <el-input v-model="form.area" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="个性签名" prop="design">
                        <el-input v-model="form.design" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="mobilePhoneNumber">
                        <el-input v-model="form.mobilePhoneNumber"></el-input>
                    </el-form-item>
                </div>
            </div>
        </el-form>
        <div class="foot">
            <el-button type="primary" @click="submit">提 交</el-button>
        </div>


    </div>
</template>
  
<script setup>
//   import { userInfo, updateUser } from "@/api/user.js";
import { ref, getCurrentInstance, computed, onBeforeMount, onMounted, toRefs } from 'vue';

const avatar=ref("http://p2.music.126.net/KJJquYnoy1VqPyX5w1QQww==/109951169377389713.jpg")
const sex = ref(true)

const form = ref({
    avatar: "http://p2.music.126.net/KJJquYnoy1VqPyX5w1QQww==/109951169377389713.jpg",
    password: "",
    nickname: "",
    email: "",
    mobilePhoneNumber: "",
    sex: Number,
    id: Number,
    account: "",
    area: "",
    hobby: "",
    work: "",
    design: "",
})

const handleClose = () => {

}



//   export default {
//     name: "PersonalDia",
//     data() {
//       return {
//         dialogVisible: false,
//         form: {
//           avatar: "",
//           password: "",
//           nickname: "",
//           age: Number,
//           email: "",
//           mobilePhoneNumber: "",
//           sex: Number,
//           id: Number,
//           account: "",
//           area: "",
//           hobby: "",
//           work: "",
//           design: "",
//         },
//         rules: {
//           nickname: [
//             { required: true, message: "昵称不能为空", trigger: "blur" },
//           ],
//           password: [
//             { required: true, message: "账号密码不能为空", trigger: "blur" },
//           ],
//         },
//       };
//     },
//     mounted() {
//       this.load();
//     },
//     methods: {
//       open() {
//         this.dialogVisible = true;
//       },
//       load() {
//         userInfo(this.$store.state.id)
//           .then((res) => {
//             console.log(res);
//             Object.assign(this.form, res.data);
//           })
//           .catch((err) => {
//             console.log(err);
//           });
//       },
//       submit() {
//         updateUser(this.form)
//           .then((res) => {
//             console.log(res);
//             this.dialogVisible = false;
//             this.$emit("flesh");
//           })
//           .catch((err) => {
//             console.log(err);
//           });
//       },
//       handleClose() {
//         this.dialogVisible = false;
//         this.$emit("flesh");
//       },
//     },
//   };
</script>
  
<style scoped>
.demo-fit {
    display: flex;
    text-align: center;
    justify-content: space-between;
}

.demo-fit .block {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
}

.demo-fit .title {
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--el-text-color-secondary);
}

.updateinfo {
    height: 350px;

}

.left {
    /* width: 330px; */
    float: left;
}

.right {
    overflow: hidden;
}

.foot {
    margin-top: 50px;
    margin-left: 100px;
}
</style>
  